import Image, { ImageComponent } from "@/components/base/Image"
import { css } from "@emotion/react"
import MarginTopBlock from "../base/MarginTopBlock"
import ButtonRegular, { ButtonRegularOutline } from "../composite/ButtonRegular/main"
import { ModalSlideUpStaticMethods } from "../composite/ModalSlideUp/main"
import { eventPreventCss } from "@/styles/variables/css"
import styled from "styled-components"
import { SvgComponent } from "../base/Svg"
import { useNavigate } from "react-router-dom"
import { PATHS } from "@/constants/path"
import kycController from "@/features_signal/kycController"

const BackgroundImage = styled(ImageComponent("kyc/reminder_background.webp"))`
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
`

const CloseButton = styled(SvgComponent("kyc/reminder_close_button.svg"))`
    position: absolute;
    height: 22rem;
    width: 22rem;
    top: 17rem;
    right: 17rem;
    cursor: pointer;
`

export default function KycReminderInUserCenter() {
    const handleGoToKycVerify = async () => {
        await ModalSlideUpStaticMethods.close("root")
        kycController.navigateToKyc()
    }

    const handleCloseButton = async () => {
        await ModalSlideUpStaticMethods.close("root")
    }

    return (
        <div
            css={css`
                position: relative;
                font-family: "Gilroy";
                display: flex;
                flex-direction: column;
                align-items: stretch;
                justify-content: center;
                height: 100%;
                background: linear-gradient(20deg, #ffffff 0%, #ffffff 40%, #ffd6e4 100%);
                backdrop-filter: blur(80rem);
                border-radius: 12rem 12rem 0 0;
                height: 288rem;
                align-self: center;
                padding: 36rem 24rem;
                overflow: hidden;
            `}
        >
            <CloseButton onClick={handleCloseButton} />
            <Image
                css={css`
                    position: absolute;
                    width: 72rem;
                    height: 72rem;
                    align-self: flex-end;
                    right: 24rem;
                    top: 12rem;
                    ${eventPreventCss.styles}
                `}
                src={"kyc/sheild.webp"}
            />
            <div
                css={css`
                    font-weight: 600;
                    font-size: 20rem;
                    line-height: 28rem;
                    letter-spacing: 0%;
                    text-align: center;
                    color: #0f0f10;
                    align-self: flex-start;
                    ${eventPreventCss.styles}
                `}
            >
                Please Complete
            </div>
            <div
                css={css`
                    font-weight: 600;
                    font-size: 20rem;
                    line-height: 28rem;
                    letter-spacing: 0%;
                    text-align: center;
                    color: #0f0f10;
                    align-self: flex-start;
                    ${eventPreventCss.styles}
                `}
            >
                Your KYC Account Vertification
            </div>
            <MarginTopBlock top={24} />
            <div
                css={css`
                    font-weight: 400;
                    font-size: 14rem;
                    line-height: 20rem;
                    letter-spacing: 0%;
                    color: #424144;
                    align-self: flex-start;
                    ${eventPreventCss.styles}
                `}
            >
                According to PAGCOR regulations, you must complete the KYC certification process
                before you can use the wallet function!
            </div>
            <MarginTopBlock top={32} />
            <ButtonRegular onClick={handleGoToKycVerify}>Go To KYC Verify Now</ButtonRegular>
        </div>
    )
}
